<template>
    <div class="music-box">
        <div class="container-flex music">
            <div class="block" v-for="(item,index) in 37" :key="index" @click="goToContent">
                <div class="music-item">
                    <span class="music-cover">
                        <img src="/static/images/base/music.png" alt="">
                    </span>
                    <span class="music-name">晓说2018</span>
                </div>
            </div>
        </div>
        <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="100" layout="prev, pager, next, jumper" :total="1000">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1
    };
  },
  components: {},
  methods: {
    goToContent() {
      this.$router.push("/videomusic/music_content");
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
};
</script>
<style lang="less" scoped>
.music-box {
  padding: 0px 20px 20px 20px;
  margin-top: 20px;
  background: #fff;
  border-radius: 10px;
  .music {
    flex-wrap: wrap;
    justify-content: flex-start;
    border-bottom: 1px solid #c1c1c1;
    margin-bottom: 20px;
    .block {
      cursor: pointer;
      padding-left: 67px;
      width: 178px;
      margin-bottom: -1px;
      border-bottom: 1px solid #c1c1c1;
      margin-top: 24px;
      .music-cover {
        background: url("/static/images/base/muisc-box.png") no-repeat;
        background-size: cover;
        width: 178px;
        height: 148px;
        display: block;
        position: relative;
        border-radius: 10px;
        img {
          position: absolute;
          right: 20px;
          bottom: 10px;
        }
      }
      .music-name {
        margin-top: 8px;
        margin-bottom: 24px;
        display: block;
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .block:nth-child(5n + 1) {
      padding-left: 0px;
    }
  }
}
</style>


